"use client"

import { useRef, useEffect } from "react"
import { View, Text, StyleSheet, TouchableOpacity, Animated, Platform } from "react-native"
import { theme } from "../../constants/theme"
import { Check, Type, SplitSquareHorizontal } from "lucide-react-native"
import { LinearGradient } from "expo-linear-gradient"

interface SettingsMenuProps {
    visible: boolean
    onClose: () => void
    settings: {
        split: boolean
        fontSize: "small" | "medium" | "large"
    }
    onSettingsChange: (settings: { split?: boolean; fontSize?: "small" | "medium" | "large" }) => void
    style?: any
}

export function SettingsMenu({ visible, onClose, settings, onSettingsChange, style }: SettingsMenuProps) {
    // 动画值
    const menuAnimation = useRef(new Animated.Value(0)).current
    const backdropAnimation = useRef(new Animated.Value(0)).current

    // 处理菜单的显示和隐藏
    useEffect(() => {
        if (visible) {
            Animated.parallel([
                Animated.timing(backdropAnimation, {
                    toValue: 1,
                    duration: 300,
                    useNativeDriver: true,
                }),
                Animated.spring(menuAnimation, {
                    toValue: 1,
                    friction: 8,
                    tension: 40,
                    useNativeDriver: true,
                }),
            ]).start()
        } else {
            Animated.parallel([
                Animated.timing(backdropAnimation, {
                    toValue: 0,
                    duration: 200,
                    useNativeDriver: true,
                }),
                Animated.timing(menuAnimation, {
                    toValue: 0,
                    duration: 200,
                    useNativeDriver: true,
                }),
            ]).start()
        }
    }, [visible, menuAnimation, backdropAnimation])

    // 菜单动画样式
    const menuStyle = {
        opacity: menuAnimation,
        transform: [
            {
                scale: menuAnimation.interpolate({
                    inputRange: [0, 1],
                    outputRange: [0.9, 1],
                }),
            },
        ],
    }

    // 背景动画样式
    const backdropStyle = {
        opacity: backdropAnimation,
    }

    if (!visible) return null

    return (
        <View style={[styles.overlay, style]}>
            <Animated.View style={[styles.backdrop, backdropStyle]} pointerEvents="auto">
                <TouchableOpacity style={{ flex: 1 }} onPress={onClose} activeOpacity={1} />
            </Animated.View>

            <Animated.View style={[styles.menu, menuStyle]}>
                <View style={styles.header}>
                    <View style={styles.handle} />
                    <Text style={styles.title}>学习设置</Text>
                </View>

                <View style={styles.content}>
                    {/* 拆分设置 */}
                    <View style={styles.settingSection}>
                        <View style={styles.settingHeader}>
                            <SplitSquareHorizontal size={16} color={theme.colors.primary.default} />
                            <Text style={styles.settingTitle}>拆分显示</Text>
                        </View>

                        <View style={styles.toggleContainer}>
                            <TouchableOpacity
                                style={[styles.toggleOption, !settings.split && styles.toggleOptionActive]}
                                onPress={() => onSettingsChange({ split: false })}
                            >
                                <Text style={[styles.toggleText, !settings.split && styles.toggleTextActive]}>关闭</Text>
                                {!settings.split && <View style={styles.activeIndicator} />}
                            </TouchableOpacity>

                            <TouchableOpacity
                                style={[styles.toggleOption, settings.split && styles.toggleOptionActive]}
                                onPress={() => onSettingsChange({ split: true })}
                            >
                                <Text style={[styles.toggleText, settings.split && styles.toggleTextActive]}>开启</Text>
                                {settings.split && <View style={styles.activeIndicator} />}
                            </TouchableOpacity>
                        </View>
                    </View>

                    {/* 字号设置 */}
                    <View style={styles.settingSection}>
                        <View style={styles.settingHeader}>
                            <Type size={16} color={theme.colors.primary.default} />
                            <Text style={styles.settingTitle}>字体大小</Text>
                        </View>

                        <View style={styles.fontSizeOptions}>
                            <TouchableOpacity
                                style={[styles.fontSizeCard, settings.fontSize === "small" && styles.fontSizeCardActive]}
                                onPress={() => onSettingsChange({ fontSize: "small" })}
                            >
                                <Text style={[styles.fontSizeLabel, settings.fontSize === "small" && styles.fontSizeLabelActive]}>
                                    小号
                                </Text>
                                <Text
                                    style={[
                                        styles.fontSizeExample,
                                        { fontSize: 14 },
                                        settings.fontSize === "small" && styles.fontSizeExampleActive,
                                    ]}
                                >
                                    Aa
                                </Text>
                                {settings.fontSize === "small" && (
                                    <View style={styles.checkCircle}>
                                        <Check size={12} color="#fff" />
                                    </View>
                                )}
                            </TouchableOpacity>

                            <TouchableOpacity
                                style={[styles.fontSizeCard, settings.fontSize === "medium" && styles.fontSizeCardActive]}
                                onPress={() => onSettingsChange({ fontSize: "medium" })}
                            >
                                <Text style={[styles.fontSizeLabel, settings.fontSize === "medium" && styles.fontSizeLabelActive]}>
                                    中号
                                </Text>
                                <Text
                                    style={[
                                        styles.fontSizeExample,
                                        { fontSize: 18 },
                                        settings.fontSize === "medium" && styles.fontSizeExampleActive,
                                    ]}
                                >
                                    Aa
                                </Text>
                                {settings.fontSize === "medium" && (
                                    <View style={styles.checkCircle}>
                                        <Check size={12} color="#fff" />
                                    </View>
                                )}
                            </TouchableOpacity>

                            <TouchableOpacity
                                style={[styles.fontSizeCard, settings.fontSize === "large" && styles.fontSizeCardActive]}
                                onPress={() => onSettingsChange({ fontSize: "large" })}
                            >
                                <Text style={[styles.fontSizeLabel, settings.fontSize === "large" && styles.fontSizeLabelActive]}>
                                    大号
                                </Text>
                                <Text
                                    style={[
                                        styles.fontSizeExample,
                                        { fontSize: 22 },
                                        settings.fontSize === "large" && styles.fontSizeExampleActive,
                                    ]}
                                >
                                    Aa
                                </Text>
                                {settings.fontSize === "large" && (
                                    <View style={styles.checkCircle}>
                                        <Check size={12} color="#fff" />
                                    </View>
                                )}
                            </TouchableOpacity>
                        </View>
                    </View>
                </View>

                <TouchableOpacity style={styles.doneButton} onPress={onClose}>
                    <LinearGradient
                        colors={theme.colors.primary.gradient}
                        start={{ x: 0, y: 0 }}
                        end={{ x: 1, y: 0 }}
                        style={styles.doneButtonGradient}
                    >
                        <Text style={styles.doneButtonText}>完成</Text>
                    </LinearGradient>
                </TouchableOpacity>
            </Animated.View>
        </View>
    )
}

const styles = StyleSheet.create({
    overlay: {
        position: "absolute",
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        justifyContent: "center",
        alignItems: "center",
        zIndex: 1000,
    },
    backdrop: {
        position: "absolute",
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        backgroundColor: "rgba(0, 0, 0, 0.5)",
    },
    menu: {
        width: "80%",
        maxWidth: 320,
        backgroundColor: theme.colors.neutral.white,
        borderRadius: theme.borderRadius.large,
        overflow: "hidden",
        ...Platform.select({
            ios: {
                shadowColor: "rgba(0, 0, 0, 0.2)",
                shadowOffset: { width: 0, height: 5 },
                shadowOpacity: 0.5,
                shadowRadius: 10,
            },
            android: {
                elevation: 8,
            },
        }),
    },
    header: {
        alignItems: "center",
        paddingTop: theme.spacing.md,
        paddingBottom: theme.spacing.sm,
        borderBottomWidth: 1,
        borderBottomColor: "rgba(0, 0, 0, 0.05)",
    },
    handle: {
        width: 36,
        height: 4,
        backgroundColor: "rgba(0, 0, 0, 0.1)",
        borderRadius: 2,
        marginBottom: theme.spacing.sm,
    },
    title: {
        fontSize: theme.fontSize.lg,
        fontWeight: theme.fontWeight.bold,
        color: theme.colors.primary.default,
    },
    content: {
        padding: theme.spacing.md,
    },
    settingSection: {
        marginBottom: theme.spacing.lg,
    },
    settingHeader: {
        flexDirection: "row",
        alignItems: "center",
        marginBottom: theme.spacing.md,
    },
    settingTitle: {
        fontSize: theme.fontSize.md,
        fontWeight: theme.fontWeight.semiBold,
        color: theme.colors.neutral.black,
        marginLeft: theme.spacing.sm,
    },
    toggleContainer: {
        flexDirection: "row",
        backgroundColor: "rgba(0, 0, 0, 0.05)",
        borderRadius: theme.borderRadius.large,
        padding: 3,
        height: 40,
    },
    toggleOption: {
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
        borderRadius: theme.borderRadius.medium,
        position: "relative",
    },
    toggleOptionActive: {
        backgroundColor: theme.colors.neutral.white,
        ...Platform.select({
            ios: {
                shadowColor: "rgba(0, 0, 0, 0.1)",
                shadowOffset: { width: 0, height: 1 },
                shadowOpacity: 0.3,
                shadowRadius: 2,
            },
            android: {
                elevation: 2,
            },
        }),
    },
    toggleText: {
        fontSize: theme.fontSize.md,
        color: theme.colors.neutral.gray,
    },
    toggleTextActive: {
        color: theme.colors.primary.default,
        fontWeight: theme.fontWeight.semiBold,
    },
    activeIndicator: {
        position: "absolute",
        bottom: 6,
        width: 4,
        height: 4,
        borderRadius: 2,
        backgroundColor: theme.colors.primary.default,
    },
    fontSizeOptions: {
        flexDirection: "row",
        justifyContent: "space-between",
        gap: theme.spacing.sm,
    },
    fontSizeCard: {
        flex: 1,
        height: 90,
        backgroundColor: "rgba(0, 0, 0, 0.05)",
        borderRadius: theme.borderRadius.medium,
        alignItems: "center",
        justifyContent: "center",
        padding: theme.spacing.sm,
        position: "relative",
    },
    fontSizeCardActive: {
        backgroundColor: `${theme.colors.primary.default}15`,
        borderWidth: 1,
        borderColor: theme.colors.primary.default,
    },
    fontSizeLabel: {
        fontSize: theme.fontSize.sm,
        color: theme.colors.neutral.darkGray,
        marginBottom: 4,
    },
    fontSizeLabelActive: {
        color: theme.colors.primary.default,
        fontWeight: theme.fontWeight.semiBold,
    },
    fontSizeExample: {
        fontWeight: theme.fontWeight.bold,
        color: theme.colors.neutral.darkGray,
        fontFamily: Platform.OS === "ios" ? "Georgia" : "serif",
    },
    fontSizeExampleActive: {
        color: theme.colors.primary.default,
    },
    checkCircle: {
        position: "absolute",
        top: 8,
        right: 8,
        width: 18,
        height: 18,
        borderRadius: 9,
        backgroundColor: theme.colors.primary.default,
        alignItems: "center",
        justifyContent: "center",
    },
    doneButton: {
        margin: theme.spacing.md,
        borderRadius: theme.borderRadius.large,
        overflow: "hidden",
        ...Platform.select({
            ios: {
                shadowColor: theme.colors.primary.default,
                shadowOffset: { width: 0, height: 2 },
                shadowOpacity: 0.3,
                shadowRadius: 4,
            },
            android: {
                elevation: 4,
            },
        }),
    },
    doneButtonGradient: {
        paddingVertical: theme.spacing.md,
        alignItems: "center",
        justifyContent: "center",
    },
    doneButtonText: {
        fontSize: theme.fontSize.md,
        color: theme.colors.neutral.white,
        fontWeight: theme.fontWeight.semiBold,
    },
})

